import { defineComponent, ref, onMounted } from "vue";
import { ipcRenderer } from "electron";
import logo from '@/assets/images/logo.png'
import { FullScreen, Minus, Close, CopyDocument } from "@element-plus/icons-vue";
import { ElIcon } from "element-plus";
export default defineComponent({
  name: "SystemHeader",
  setup() {
    const windowTitle = ref("");
    const windowIcon = ref(logo);


    const isFullScreen = ref(false);
    const isFocused = ref(true);

    // 获取窗口配置信息
    const getWindowConfig = async () => {
      try {
        const config = await ipcRenderer.invoke("get-window-config");
        if (config) {
          windowTitle.value = config.title;
        }
      } catch (error) {
        console.error("Failed to get window config:", error);
      }
    };

    // 监听窗口焦点变化
    ipcRenderer.on('window-focus-changed', (event, focusState) => {
      isFocused.value = focusState.isFocused;
    });

    // 组件挂载时获取配置
    onMounted(() => {
      getWindowConfig();
    });

    // 窗口控制函数
    const handleMinimize = () => {
      ipcRenderer.invoke("window-control", "minimize");
    };

    const handleMaximize = () => {
      isFullScreen.value = !isFullScreen.value;
      ipcRenderer.invoke("window-control", "maximize");
    };

    const handleClose = () => {
      ipcRenderer.invoke("window-control", "close");
    };

    return () => (
      <div class={`client-system-header ${!isFocused.value ? 'no-focus' : ''}`} style="-webkit-app-region: drag;">
        <div class="system-header-info">
          {windowIcon.value && <img src={windowIcon.value} alt="icon" class="info-icon" />}
          <div class="info-title">{windowTitle.value}</div>
        </div>
        <div class="system-header-controls" style="-webkit-app-region: no-drag;">
          <div class="controls-btn" onClick={handleMinimize}><ElIcon><Minus /></ElIcon></div>
          <div class="controls-btn" onClick={handleMaximize}>
            <ElIcon>{!isFullScreen.value ? <FullScreen /> : <CopyDocument />}</ElIcon>
          </div>
          <div class="controls-btn red" onClick={handleClose}><ElIcon><Close /></ElIcon></div>
        </div>
      </div>
    );
  },
});
